<template>
    <div>
      <div class="top-panel">
        <el-card>
          <el-form :model="searchForm" label-width="70px" label-position="right">
            <el-row>
              <el-col :span="5">
                <el-form-item label="用户名">
                  <el-input
                    class="password-input"
                    v-model="searchForm.userNameFuzzy"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="邮箱">
                  <el-input
                    class="password-input"
                    v-model="searchForm.emailFuzzy"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" :style="{ paddingLeft: '10px' }">
                <el-button type="success" @click="loadDataList()"
                  >查询
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <el-card class="table-data-card">
        <template #header>
          <span>角色列表</span>
        </template>
        <Table
          ref="tableInfoRef"
          :columns="columns"
          :fetch="loadDataList"
          :dataSource="tableData"
          :options="tableOptions"
          :extHeight="tableOptions.extHeight"
        >
          <template #slotStatus="{ index, row }">
            <div class="row-op-panel">
              <Badge showType="green" text="未处理" v-if="row.status == 1"></Badge>
              <Badge showType="red" text="已驳回" v-if="row.status == -1"></Badge>
              <Badge showType="blue" text="已完成" v-if="row.status == 2"></Badge>
            </div>
          </template>

          <template #methodType="{ index, row }">
            <div class="row-op-panel">
              <Badge showType="green" text="线上" v-if="row.method == 1"></Badge>
              <Badge showType="red" text="线下" v-if="row.method == 0"></Badge>
            </div>
          </template>

          <template #roleNames="{ index, row }">
            <div class="row-op-panel">
                <span v-if="row.role==0">普通用户</span>
                <span v-else>管理员</span>
            </div>
          </template>

          <template #avatorStatus="{ index, row }">
            <div class="row-op-panel">
                <Cover v-if="row.imgPath!=null" :cover="row.imgPath" :width="100" :height="100"></Cover>
                <el-avatar v-else :size="40" >
                    <div class="icon">{{ (row.username||"")[0]}}</div>
                </el-avatar>
            </div>
          </template>

          <template #slotOperation="{ index, row }">
            <div
              class="row-op-panel"
            >
              <a
                v-if="row.status==1"
                href="javascript:void(0)"
                @click.prevent="changeApplyStatus(row,'-1')"
                >驳回</a
              >
              <span
                v-else
                style="margin-right: 10px; color: rgb(170, 176, 182);"
                class="a-link"
                >驳回</span
              >
              <a
                 v-if="row.status==1"
                class="a-link"
                href="javascript:void(0)"
                @click.prevent="changeApplyStatus(row,'2')"
                >完成</a
              >
              <span
                v-else
                style="color: rgb(170, 176, 182);"
                class="a-link"
                >完成</span
              >
            </div>
          </template>
        </Table>
      </el-card>
    </div>
  </template>

  <script setup>
  import { getCurrentInstance, nextTick, ref } from "vue";
  const { proxy } = getCurrentInstance();


  const userInfo = ref(
    proxy.VueCookies.get("userInfo")||null);
  const api = {
    loadDataList: "/appointment/loadAppointment4Counselor",
    delAccount: "/appointment/delInfo",
    updateStatus: "/appointment/updateStatus4Counselor",
  };
  const searchForm = ref({});
  const tableData = ref({});
  const tableOptions = ref({
    extHeight: 125,
  });

  const columns = [
   {
      label: "预约编号",
      prop:"counselorId",
    },
    {
      label: "用户名",
      prop: "username",
    },
    {
      label: "邮箱",
      prop: "email",
    },

    {
      label: "预约时间",
      prop: "appointmentTime",
    },
    {
      label: "方式",
      scopedSlots: "methodType",
    },
    {
      label: "备注信息",
      prop: "remark",
    },
    {
      label: "创建时间",
      prop: "createTime",
    },
    {
      label: "更新时间",
      prop: "updateTime",
    },
    {
      label: "状态",
      prop: "status",
      scopedSlots: "slotStatus",
    },
    {
      label: "操作",
      prop: "operation",
      scopedSlots: "slotOperation",
    },
  ];

  const tableInfoRef = ref();

  const loadDataList = async () => {
    let params = {
      pageNo: tableData.value.pageNo,
      pageSize: tableData.value.pageSize,
    };
    Object.assign(params, searchForm.value);
    let result = await proxy.Request({
      url: api.loadDataList,
      params: params,
    });
    if (!result) {
      return;
    }
    Object.assign(tableData.value, result.data);
  };


  //启用禁用
  const changeApplyStatus = (data,status) => {
    let info = status == 0 ? "驳回" : "完成";
    proxy.Confirm(`确定要【${info}】【${data.username}】的预约吗？`, async () => {
      let result = await proxy.Request({
        url: api.updateStatus,
        params: {
            appointmentId: data.appointmentId,
            status: status,
        },
      });
      if (!result) {
        return;
      }
      proxy.Message.success("操作成功");
      loadDataList();
    });
  };
  </script>

  <style lang="scss" scoped>
  .detail-tree-panel {
    height: calc(100vh - 273px);
    overflow: auto;
    width: 100%;
  }
  </style>
